<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的mouseover和show等方法设计横向选项卡</title>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/diy.css" type="text/css" rel="stylesheet" />
<link href="css/origin.css" type="text/css" rel="stylesheet" />
<link href="css/index.css" type="text/css" rel="stylesheet" />
<style>
.today_important {
	width: 252px;
	height: 158px;
	background: #f1f1f1;
	border: 1px solid #d6d6d6;
}
.today_nav {
	margin-top: 16px;
	float: right;
	margin-right: 15px
}
.today_nav li {
	background: #d4d4d4;
	float: left;
	margin-left: 6px;
	width: 8px;
	height: 8px
}
.today_nav li:hover {
	background: #eb8219
}
.today_nav li.on {
	background: #eb8219
}
.today_main {
	margin: auto;
	width: 248px;
	height: 118px;
}
.today_main ul {
	margin: auto; width: 236px
}
.today_main ul li {
	border-top: 1px dotted #d4d4d4;
	height: 57px
}
</style>
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>

<div class="slierbar home_links today_important">
  <div class="today_topbg">
    <h4>今日硬件要闻</h4>
    <ul class="today_nav">
      <li class="on"></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="today_main">
    <ul>
      <li>
        <div class="today_print"><a href=""><img height="34" src="images/0101.jpg" width="34" /></a></div>
        <div class="today_new">
        <div class="todat_rank">
        <p></p></div>
        <p><a href="">让音乐更动听！家用音质精良的音响推荐</a></p> 
        </div>
      </li>
      <li>
      <div class="today_print"><a href=""><img height="34" src="images/0102.jpg" width="34" /></a></div>
      <div class="today_new">
      <div class="todat_rank">
      <p></p></div>
      <p><a href="">海量数据惹人烦？麦沃K3082H硬盘拷贝机来帮你</a></p> </div></li>      
    </ul>
    <ul style="display: none">
      <li>
      <div class="today_print"><a href=""><img height="34" src="images/0201.jpg" width="34" /></a></div>
      <div class="today_new">
      <div class="todat_rank">
      <p></p></div>
      <p><a href="">这些键鼠“双剑客” 助你玩转新学期</a></p></div></li>
      <li>
      <div class="today_print"><a href=""><img height="34" src="images/0202.jpg" width="34" /></a></div>
      <div class="today_new">
      <div class="todat_rank">
      <p></p></div>
      <p><a href="">小尺寸SSD会是那些塞不下SSD笔记本的福音</a></p></div></li>      
    </ul>
    <ul style="display: none">
      <li>
      <div class="today_print"><a href=""><img height="34" src="images/0301.jpg" width="34" /></a></div>
      <div class="today_new">
      <div class="todat_rank">
      <p></p></div>
      <p><a href="">可以视频通话和支付宝的智能手表，了解一下？</a></p></div></li>
      <li>
      <div class="today_print"><a href=""><img height="34" src="images/0302.jpg" width="34" /></a></div>
      <div class="today_new">
      <div class="todat_rank">
      <p></p></div>
      <p><a href="">B450主板首发评测：TA竟能让二代锐龙更强！</a></p></div></li>      
    </ul>
  </div>
  <div class="today_footbg"></div>
</div>

<script>
$(function(){
  $('.today_nav li').mouseover(function(){
	if(this.className == 'on') {
	   return false;
	  }
	$('.today_nav li').removeClass('on');
	$(this).addClass('on');	
	$('.today_main ul').hide();
	$('.today_main ul').eq($('.today_nav li').index($(this))).show();	
  });
});
</script>
</body>
</html>
